<template>
  <!-- 页面容器 -->
  <view class="page-container">
    <!-- 用户信息头部 -->
    <view class="cu-bar bg-white padding">
      <view class="avatar-box">
        <image class="cu-avatar xl" src="/src/static/logo.png" mode="aspectFill"></image>
      </view>
      <view class="user-info">
        <view class="text-black text-lg font-bold">{{userInfo.username}}--{{uinfo?.username}}</view>
        <view class="text-sm text-gray">baiyujing@qq.com</view>
      </view>
      <button class="cu-btn round  bg-green text-white" @click="handelAdd">编辑资料</button>
    </view>
    <!-- <view v-for="item in student" :key="item.name" class="padding">
      <text>{{item.name}}</text>
      <text>{{item.score}}</text>
    </view>
	<navigator url="/pages/index/index">
		查看跨页面组件 
	</navigator>
	<button class="cu-btn bg-cyan" @click="handelAction">触发action,加载学院</button> -->
    <!-- 数据统计卡片 -->
    <view class="cu-card margin-top">
      <view class="flex justify-between padding">
        <view class="text-center">
          <text class="text-xl font-bold">1250</text>
          <text class="text-gray text-xl">积分</text>
        </view>
        <view class="text-center">
          <text class="text-xl font-bold">12</text>
          <text class="text-gray text-xl">订单</text>
        </view>
        <view class="text-center">
          <text class="text-xl font-bold">8</text>
          <text class="text-gray text-xl">收藏</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="cu-list menu margin-top">
      <view class="cu-item arrow" v-for="item in menuList" :key="item.id">
        <view class="content">
          <uni-icons :type="item.icon" size="22" :color="item.color"></uni-icons>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 安全设置 -->
    <view class="cu-list menu margin-top">
      <view class="cu-item arrow">
        <view class="content">
          <uni-icons type="gear" size="22" color="#f60"></uni-icons>
          <text>安全设置</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {useStore} from 'vuex'
// 定义菜单数据
const menuList = [
  {
    id: 1,
    name: '我的订单',
    icon: 'list',
    color: '#09bb07'
  },
  {
    id: 2,
    name: '我的收藏',
    icon: 'star',
    color: '#ff9900'
  },
  {
    id: 3,
    name: '收货地址',
    icon: 'location',
    color: '#e64340'
  },
  {
    id: 4,
    name: '优惠券',
    icon: 'heart',
    color: '#9c27b0'
  }
];
const store = useStore()
const userInfo = computed(()=>store.state.userInfo)
const student = computed(()=>store.state.student)
const handelAdd = ()=>{
	store.commit('addStu',{name:'剑来',score:Math.random()*100})//触发mutation,添加学生
}
const handelAction = ()=>{
	store.dispatch('getStudent')//触发action,加载学院
}

//提取子模块数据
const uinfo = computed(()=>store.state.user.uinfo)
</script>

<style scoped lang="scss">
.page-container {
  background-color: #f5f5f5;
  min-height: calc(100vh - 412px);
}

.avatar-box {
  margin-right: 15px;
}

.user-info {
  flex: 1;
  color: white;
}

.menu-list {
  background-color: white;
}

.cu-item {
  padding: 15px 20px;
}

.content {
  display: flex;
  align-items: center;
}

.content uni-icons {
  margin-right: 15px;
}
</style>